<template>
    <el-select v-model="optionValue" @change="changeValue" :placeholder="$t('province')">
        <el-option
            v-for="item in lists"
            :label="item.name"
            :value="item.adcode"
            :key="item.adcode"
        ></el-option>
    </el-select>
</template>
<script>
import { getDistrictList } from "../../api/district";
export default {
    name: "ProvinceEditSelect",
    props: ['nowValue'],
    data() {
        return {
            lists: [],
            province: null,
            optionValue: this.nowValue,
            parentChange:0
        };
    },
    created() {
        this.setList();
    },
    methods: {
        changeValue(value){
            let item = null;
            for (item of this.lists) {
                if (item.adcode == value) break;
            }
            this.$emit('changeProvince',item)
        },
        async setList() {
            let response = await getDistrictList();
            if (response.status == 200 && response.data.data) {
                this.lists = response.data.data;
            }
        }
    },
    watch: {
        optionValue(newVal) {
            this.$emit("update:nowValue", newVal);
        },
        nowValue(newVal) {
            this.optionValue = newVal;
        }
    }
};
</script>
